<style lang="less">
.grid {
	width: 95%;
	background: #fff;
	margin: 0 auto;
	-moz-box-shadow: 0px 2px 10px 1px #ddd;
	-webkit-box-shadow: 0px 2px 10px 1px #ddd;
	box-shadow: 0px 2px 10px 1px #ddd;
	padding: 4px 0 10px;
	position: relative;
	top: -10px;
	a{
		display: block;
	}
	.van-hairline--top-bottom::after {
		border: none;
	}
	.van-tabbar {
		height: auto;
		-webkit-box-shadow: none;
		box-shadow: none;
		.van-row {
			width: 100%;
		}
	}
	.menu-links {
			.box {
				margin-top: 16px;
			.img {
				width: 50px;
				height: 50px;
			}
			.msg {
				display: block;
				font-size: 14px;
				color: #40444B;
			}
		}
	}
}
</style>

<template>
    <div :class="cname">
        <van-row class="menu-links">
            <van-col class="box" span="8" v-for="(item,index) in ArrData" :key="item.id">
				<router-link v-if="item.path" :to="{path: item.path, query: {index:index}}">
                    <img :src="item.url" alt="" class="img">
                    <span class="msg">{{item.msg}}</span>
                </router-link>
                <div v-else>
                		<img :src="item.url" alt="" class="img">
                    <span class="msg">{{item.msg}}</span>
                </div>
            </van-col>
        </van-row>
    </div>
</template>

<script>
import {
    Row,
    Col,
    Tabbar,
    TabbarItem
}from 'vant';

import icon_01 from '../../assets/img/index/icon_01.png';
import icon_02 from '../../assets/img/index/icon_02.png';
import icon_03 from '../../assets/img/index/icon_03.png';
import icon_04 from '../../assets/img/index/icon_04.png';
import icon_05 from '../../assets/img/index/icon_05.png';
export default {
    name:'grid_box',
    components: {
        [Row.name] : Row,
        [Col.name] : Col,
        [Tabbar.name] : Tabbar,
        [TabbarItem.name] : TabbarItem
    },
    data() {
        return {
            cname: 'grid',
            isbot: false,
	        ArrData: [
	            {
	                url: icon_01,
	                msg: "常规巡视",
	                path: "/cgxs_renyuanXuanze"
	            },
	            {
	                url: icon_02,
	                msg: "特殊巡视",
	                path: "/tsxs_renyuanXuanze"
	            },
	            {
	                url: icon_03,
	                msg: "线路检修",
	                path: "/xljx_renyuanXuanze"
	            },
	            {
	                url: icon_04,
	                msg: "保电值守",
	                path: "/bdzs_renyuanXuanze"
	            },
	            {
	                url: icon_05,
	                msg: "审核",
	                path: "/shenhe_list"
	            }
	        ]
    	}
	}
}
</script>
